<template>
     <div id="RoseCart" style="width: 100%; height: 260px;"></div>

</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { CategoryProApi } from '@/api';
const initCart = (data:any) => { 
  
    var myChart = echarts.init(document.getElementById('RoseCart'));
    //第二种方式 设置函数获取
    const fromdata = data.map(function (obj: any) { 
        return {
            name: obj.name,
            value:obj.ptotal
        }
    })


  let option = {
        title: {
            text: '类目下的商品',
            subtext: '数据实时统计',
            left: "center"
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [30, 100],
                center: ['40%', '60%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: fromdata
                // data: data.map(({ name, ptotal }) =>({name,value:ptotal}))
            }
        ]
    };

   myChart.setOption(option);

}

onMounted(() => { 
    CallCategoryProApi()
})

const CallCategoryProApi = () => { 
    CategoryProApi.selectBar.call().then((res: any) => { 
        console.log(res);
        
        initCart(res)
    })
}
</script>